<template>
  <ElCard class="e-m-r">
    <ElRow class="operation" type="flex" justify="space-between">
      <ElCol :span="14">
        开始：
        <ElDatePicker
          v-model="startDate"
          prefix-icon="dd"
          type="date"
          placeholder="开始日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </ElDatePicker>
        结束：
        <ElDatePicker
          v-model="endDate"
          prefix-icon="dd"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="结束日期"
        >
        </ElDatePicker>
        <ElButton type="warning" round plain @click="filterRcored"
          >查询</ElButton
        >
      </ElCol>
      <ElCol :span="10">
        <ElRadioGroup
          v-model="filterType"
          class="btn-filter"
          @change="filterRcored('filter')"
        >
          <ElRadioButton :label="0">全部记录</ElRadioButton>
          <ElRadioButton :label="1">常见病调理记录</ElRadioButton>
          <ElRadioButton :label="2">保健调理记录</ElRadioButton>
        </ElRadioGroup>
      </ElCol>
    </ElRow>
    <template v-if="filterType === 1">
      <div v-for="one in showOneRecord" :key="one.id" class="one-record">
        <ElRow class="record-item">
          <ElCol :span="12">
            服务时间：{{ one.start_time }} —— {{ one.end_time }}
          </ElCol>
          <ElCol :span="9"> 时长：{{ one.continue_time }} 天</ElCol>
          <ElCol :span="3">
            <div
              v-if="one.isShow"
              class="button-toggle"
              @click="toggleTable(one, index, 1)"
            >
              收起<i class="el-icon-arrow-up"></i>
            </div>
            <div
              v-else
              class="button-toggle"
              @click="toggleTable(one, index, 1)"
            >
              展开<i class="el-icon-arrow-down"></i>
            </div>
          </ElCol>
        </ElRow>
        <ElTable v-if="one.isShow" :data="one.data" style="width: 100%" stripe>
          <ElTableColumn align="center" label="服务时间" prop="create_time">
          </ElTableColumn>
          <ElTableColumn align="center" label="项目" prop="face_result">
          </ElTableColumn>
          <ElTableColumn align="center" label="服务技师" prop="masseur_name">
          </ElTableColumn>
          <ElTableColumn align="center" label="操作">
            <template slot-scope="scope">
              <ElButton round @click="gotoAdvisory(scope.row)">查看</ElButton>
            </template>
          </ElTableColumn>
        </ElTable>
      </div>
      <ElPagination
        v-if="oneRecord.length > 10"
        :current-page.sync="oneCurrentPage"
        :page-size="onePageSize"
        :page-sizes="pageSizes"
        layout="sizes, prev, pager, next"
        :total="oneRecord.length"
        @size-change="handleSizeChangeOne"
        @current-change="handleCurrentChangeOne"
      >
      </ElPagination>
    </template>
    <template v-else-if="filterType === 2">
      <div v-for="one in showTwoRecord" :key="one.id" class="one-record">
        <ElRow class="record-item">
          <ElCol :span="12">
            服务时间：{{ one.start_time }} —— {{ one.end_time }}
          </ElCol>
          <ElCol :span="9"> 时长：{{ one.continue_time }} 天</ElCol>
          <ElCol :span="3">
            <div
              v-if="one.isShow"
              class="button-toggle"
              @click="toggleTable(one, index)"
            >
              收起<i class="el-icon-arrow-up"></i>
            </div>
            <div v-else class="button-toggle" @click="toggleTable(one, index)">
              展开<i class="el-icon-arrow-down"></i>
            </div>
          </ElCol>
        </ElRow>
        <ElTable v-if="one.isShow" :data="one.data" style="width: 100%" stripe>
          <ElTableColumn align="center" label="服务时间" prop="create_time">
          </ElTableColumn>
          <ElTableColumn align="center" label="项目" prop="face_result">
          </ElTableColumn>
          <ElTableColumn align="center" label="服务技师" prop="masseur_name">
          </ElTableColumn>
          <ElTableColumn align="center" label="操作">
            <template slot-scope="scope">
              <ElButton round @click="gotoAdvisory(scope.row)">查看</ElButton>
            </template>
          </ElTableColumn>
        </ElTable>
      </div>
      <ElPagination
        v-if="twoRecord.length > 10"
        :current-page.sync="twoCurrentPage"
        :page-size="onePageSize"
        :page-sizes="pageSizes"
        layout="sizes, prev, pager, next"
        :total="twoRecord.length"
        @size-change="handleSizeChangeTwo"
        @current-change="handleCurrentChangeTwo"
      >
      </ElPagination>
    </template>
    <template v-else>
      <ElTable :data="showRecord" style="width: 100%" stripe>
        <ElTableColumn align="center" label="服务时间" prop="create_time">
        </ElTableColumn>
        <ElTableColumn align="center" label="项目" prop="face_result">
        </ElTableColumn>
        <ElTableColumn align="center" label="服务技师" prop="masseur_name">
        </ElTableColumn>
        <ElTableColumn align="center" label="操作">
          <template slot-scope="scope">
            <ElButton round @click="gotoAdvisory(scope.row)">查看</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <ElPagination
        v-if="record.length > 10"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        layout="sizes, prev, pager, next"
        :total="record.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </ElPagination>
    </template>
  </ElCard>
</template>

<script>
import format from 'date-fns/format';
import _ from 'lodash';
import {http, catchAppError} from '@/util';
import url from '@/config';
import {pageSizes, menusNavigation} from '@/store';
import toast from '@/toast';

export default {
  name: 'EMR',
  props: {
    uId: {
      type: Number,
      default: 0
    },
    newKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      startDate: format(Date.now() - 60 * 60 * 24 * 30 * 1000, 'yyyy-MM-dd'),
      endDate: format(Date.now(), 'yyyy-MM-dd'),
      filterType: 0,
      record: [],
      oneRecord: [],
      twoRecord: [],
      pageSize: 10,
      onePageSize: 10,
      twoPageSize: 10,
      currentPage: 1,
      oneCurrentPage: 1,
      twoCurrentPage: 1,
      pageSizes,
      showRecord: [],
      showOneRecord: [],
      showTwoRecord: []
    };
  },
  beforeMount() {
    this.getRecord();
  },
  methods: {
    handleCurrentChange(val) {
      this.showRecord = _.chunk(this.record, this.pageSize)[val - 1];
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    handleCurrentChangeOne(val) {
      this.showOneRecord = _.chunk(this.oneRecord, this.onePageSize)[val - 1];
    },
    handleSizeChangeOne(val) {
      this.onePageSize = val;
      this.handleCurrentChangeOne(1);
    },
    handleCurrentChangeTwo(val) {
      this.showTwoRecord = _.chunk(this.twoRecord, this.twoPageSize)[val - 1];
    },
    handleSizeChangeTwo(val) {
      this.twoPageSize = val;
      this.handleCurrentChangeTwo(1);
    },
    getRecord() {
      http
        .post(url.allRecord, {
          u_id: this.uId,
          start_time: this.startDate,
          end_time: this.endDate
        })
        .then(res => {
          this.record = res || [];
          this.handleCurrentChange(1);
        })
        .catch(catchAppError);
    },
    clearPageData() {
      this.pageSize = 10;
      this.onePageSize = 10;
      this.twoPageSize = 10;
      this.currentPage = 1;
      this.oneCurrentPage = 1;
      this.twoCurrentPage = 1;
    },
    filterRcored(type) {
      if (type === 'filter') {
        if (this.filterType === 1 && this.oneRecord.length) return;
        if (this.filterType === 2 && this.twoRecord.length) return;
        if (this.filterType === 0 && this.record.length) return;
      }
      const allIsCheck = this.startDate && this.endDate;
      if (!allIsCheck) {
        toast('时间段必填');
        return;
      }
      if (this.filterType) {
        const params = {
          u_id: this.uId,
          start_time: this.startDate,
          end_time: this.endDate,
          type: this.filterType
        };
        http
          .post(url.oneRecord, params)
          .then(res => {
            this.clearPageData();
            if (this.filterType === 1) {
              this.oneRecord = res || [];
              this.oneRecord.forEach(e => (e.isShow = false));
              this.handleCurrentChangeOne(1);
              return;
            }
            this.twoRecord = res || [];
            this.twoRecord.forEach(e => (e.isShow = false));
            this.handleCurrentChangeTwo(1);
          })
          .catch(catchAppError);
        return;
      }
      this.getRecord();
    },
    gotoAdvisory(row) {
      if (row.type === '常见病') {
        menusNavigation.navTab('CommonDisease', '3', {
          babyId: this.uId,
          recordId: row.id
        });
        return;
      }
      menusNavigation.navTab('HealthCare', '3', {
        babyId: this.uId,
        recordId: row.id
      });
    },
    toggleTable(one, i, filterType) {
      // eslint-disable-next-line no-param-reassign
      one.isShow = !one.isShow;
      if (filterType === 1) {
        this.showOneRecord.splice(i, 1, one);
        return;
      }
      this.showTwoRecord.splice(i, 1, one);
    }
  }
};
</script>

<style lang="scss">
.e-m-r {
  .operation {
    margin-bottom: 25px;
    .el-input {
      width: 140px;
    }
    .el-date-editor {
      margin-right: 30px;
    }
    .el-radio-group {
      display: flex;
      justify-content: flex-end;
    }
  }
  .btn-filter .el-radio-button__inner {
    font-size: 16px;
    font-weight: bold;
  }
  .one-record {
    color: #4b90ff;
    .record-item {
      padding: 20px;
    }
    &:nth-child(even) {
      .record-item {
        background-color: #4b90ff;
        color: #fff;
      }
    }
    .button-toggle {
      &:hover {
        cursor: pointer;
      }
    }
  }
  .el-table {
    th {
      background-color: #f3f4f6;
    }
    td {
      border-bottom: 0;
    }
    tr {
      cursor: pointer;
    }
  }
}
</style>
